<template>
  <view :class="classSheet">
    <slot />
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { cva } from "class-variance-authority";
import { twMerge } from "tailwind-merge";

const props = withDefaults(
  defineProps<{
    size?: "mini" | "normal" | "plus" 
    type?: "normal" | "primary" | "warning" | "danger" | "success";
    plain?: boolean;
    rounded?: boolean;
  }>(),
  {
    size: "normal",
    type: "normal",
  }
);

const vars = cva("inline-flex", {
  variants: {
    type: {
      danger: "text-danger bg-danger border-danger",
      warning: "text-warning bg-warning border-warning",
      success: "text-success bg-success border-success",
      normal: "text-main bg-[#333]",
      primary: "!text-main bg-primary",
    },
    size: {
      mini: "px-1 py-0.5 text-xs rounded-[8px]",
      normal: "px-3 py-1 text-sm rounded-[8px]",
      large: "px-2 py-1 text-lg rounded-md",
    },
    plain: {
      true: "bg-[transparent] border",
      false: "text-white",
    },
    rounded: {
      true: "rounded-full",
      // false:""
    }
  },
  defaultVariants: {},
});

const classSheet = computed(() =>
  twMerge(vars(props))
);
</script>
